import type { ColumnDef } from "@tanstack/react-table";
import { format } from "date-fns";
import { Badge } from "../ui/badge";

export type Issue = {
  id: string;
  title: string;
  type: "bug" | "script" | "env";
  owner: string;
  test: string;
  task: string;
  create_at: Date;
};

const typeBadgeMap: Record<string, React.ReactElement> = {
  bug: <Badge className="px-1 text-[10px] uppercase">bug</Badge>,
  script: (
    <Badge variant="destructive" className="px-1 text-[10px] uppercase">
      script
    </Badge>
  ),
};

const renderBadge = (type: string) =>
  typeBadgeMap[type] || (
    <Badge variant="secondary" className="px-1 text-[10px] uppercase">
      {type}
    </Badge>
  );

export const issuesColumns: ColumnDef<Issue>[] = [
  {
    accessorKey: "type",
    header: "Type",
    cell: ({ row }) => renderBadge(row.original.type),
    size: 50,
  },
  {
    accessorKey: "title",
    header: "Title",
    cell: ({ row }) => <span className="truncate">{row.original.title}</span>,
    size: 500,
  },
  {
    accessorKey: "owner",
    header: "Owner",
    size: 150,
  },
  {
    accessorKey: "test",
    header: "Test",
    cell: ({ row }) => <div className="truncate">{row.original.test}</div>,
    size: 500,
  },
  {
    accessorKey: "create_at",
    header: () => <div className="pr-2 text-right">Create At</div>,
    cell: ({ row }) => (
      <div className="pr-2 text-right">
        {format(new Date(row.original.create_at), "yyyy-MM-dd HH:mm:ss")}
      </div>
    ),
    size: 200,
  },
];
